<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>闯关</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="https://og6593g2z.qnssl.com/fundebug.0.3.3.min.js" apikey="e65b1e28cd641345cd31ef6dce8ac62f7aaa3ba3420be5a1c4aa23ee3636992d"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/productTask/moment.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/productTask/vue.min.js{$Think.config.RESOURCE_VER}"></script>
    <!--<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">-->
    <link href="{$Think.config.RESOURCEURL}wx_assets/productTask/iview.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="{$Think.config.SERVER_NAME}/wx_assets/productTask/iview.min.js{$Think.config.RESOURCE_VER}"></script>
    <link href="{$Think.config.RESOURCEURL}wx_assets/productTask/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/productTask/progressList.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
</head>
<style>
    body {
        background:none;
        background-color: white !important;
    }
</style>
<body>
<div id="app">
    <section class="container">
        <img :src="taskInfo.progressBackground" style="top:0;position:fixed;bottom:0;width:100%;z-index: -1">
        <section class="header">
            <div class="left">
                <div style="width: 100%;height: 100%;overflow: hidden;">
                    <img :src="taskInfo.proImg" alt="">
                </div>
            </div>
            <div class="right">
                <h2 v-text="taskInfo.taskName"></h2>
                <div style="position:relative;overflow:hidden"><span>进度：</span><i-progress :percent="taskInfo.lev" class="progress" :stroke-width="5"></i-progress></div>
                <div v-if="taskInfo.status== 1 || taskInfo.status == 4"><icon type="ios-clock-outline" class="el-icon-time"></icon><span class="time">剩余时间：{{time}}</span></div>
                <div class="status">
                    <span v-if="taskInfo.status==1">状态：进行中</span>
                    <span v-else-if="taskInfo.status==2">状态：已完成</span>
                    <span v-else-if="taskInfo.status==3">状态：失败</span>
                    <span v-else-if="taskInfo.status==4">状态：待审核</span>
                    <span class="btn" @click="showImg">进入社群</span>
                </div>
            </div>
        </section>
        <section class="task_list">
            <ul>
                <li v-for="(p,index) in progressList" :key="index">
                    <!-- <template v-if="taskInfo.progress<index">
                        <section class="checkpoint">
                            <div class="tip" v-text="index+1"></div>
                            <div class="descript disabeld" :class="{noreward:!p.money}">
                                <icon type="android-done" v-if="p.status==1"></icon>
                                <icon type="android-close" v-else-if="p.status==2"></icon>
                                <i class="next" v-else></i>
                                <p>{{p.descript | capitalize}}</p>
                            </div>
                        </section>
                    </template> -->
                    <template>
                        <section v-if="p.status !== 'last'" class="checkpoint" @click="goto(taskId,index)">
                            <!-- <div class="tip" v-text="index+1"></div> -->
                            <div class="descript" :class="{active:taskInfo.progress>index}">
                                <span class="tip-text">
                                    第{{index+1}}关
                                    <img width=35 height=35 v-if="p.status==2" src="{$Think.config.RESOURCEURL}wx_assets/productTask/faceclose.png" alt="">
                                    <img width=35 height=35 v-else-if="p.money" src="{$Think.config.RESOURCEURL}wx_assets/productTask/hongbao.png" alt="">
                                </span>
                                <!-- <icon type="android-done" v-if="p.status==1"></icon>
                                <icon type="android-close" v-else-if="p.status==2"></icon>
                                <i class="next" v-else></i>
                                <p v-text="p.descript"></p> -->
                            </div>
                        </section>
                        <section v-else class="checkpoint">
                            <div class="last-checkpoint">
                                <img class="last-flower" src="{$Think.config.RESOURCEURL}wx_assets/productTask/flower.png" alt="">
                            </div>
                        </section>
                    </template>
                </li>
            </ul>
        </section>
    </section>
</div>
</body>
<script>
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var app = new Vue({
        el: '#app',
        data:function() {
            return {
                taskId:'',
                taskInfo:{},
                progressList:[],
                time:''
            }
        },
        filters:{
            capitalize: function (value) {
                if (!value) return '';
                var length = value.length;
                var result = '';
                for(var i =0;i<length;i++){
                    result+='*';
                }
                return result;
            }
        },
        mounted:function(){
            var p=$.util.getParamAsObject();
            this.taskId = p.id;
            this.renderView();
            this.updateTime();
        },
        methods:{
            renderView:function(){
                var id = this.taskId,
                        self = this;
                var params={
                    id:id
                };
                $.req.get("call.json?module=productTask&customerId={$customerId}&method=getAllProgress",{
                    params:params
                },function(data){
                    // data = {
                    //     "id": "1",
                    //     "progress": "3",
                    //     "status": "2",
                    //     "startTime": "2017-12-14 09:53:23",
                    //     "proImg": "http://oss.mboxone.com/20160626/image/55/1466908050317394.jpg",
                    //     "taskName": "蜂蜜的体验",
                    //     "progressBackground": null,
                    //     "communityImg": "http://oss.mboxone.com/20171213/image/3/1513147348257519.jpg",
                    //     "progressList": [
                    //         {
                    //             "descript": "蜂蜜直接吃试一下，看看甜不甜",
                    //             "wish": "小小奖励一下",
                    //             "money": "1",
                    //             "status": "1"
                    //         },
                    //         {
                    //             "descript": "冲水喝试一下（无红包）",
                    //             "wish": "",
                    //             "money": "",
                    //             "status": "2"
                    //         },
                    //         {
                    //             "descript": "把蜂蜜涂在脸上，睡觉时不要洗掉，第二天起来后看效果怎样。",
                    //             "wish": "大红包奖励",
                    //             "money": "1",
                    //             "status": "1"
                    //         },
                    //         {
                    //             "descript": "用蜂蜜洗脚，看看脚气能不能好？（无红包）",
                    //             "wish": "",
                    //             "money": "",
                    //             "status": "1"
                    //         },
                    //         {
                    //             "descript": "用蜂蜜XXXX",
                    //             "wish": "",
                    //             "money": "",
                    //             "status": "1"
                    //         }
                    //     ],
                    //     "allProgress": 5,
                    //     "taskTime": "120"
                    // }
                    if(data.code){
                        self.$Modal.error({
                            content: data.msg
                        });
                    }else{
                        data.lev = parseInt(data.progress/data.allProgress*100);
                        var endTime = moment(data.startTime).add(data.taskTime,'hours');
                        self.taskInfo = data;
                        self.progressList = data.progressList;
                        self.progressList.push({
                            "status": "last"
                        })
                        self.time = self.calDiffMonths(endTime);
                        self.checkpointBegin();
                    }
                })
            },
            checkpointBegin:function(){
                if(this.taskInfo.status==0){
                    var id = this.taskId;
                    var self = this;
                    this.$Modal.confirm({
                        render:function(h){
                            return h("div",[
                                    h("div",null,"提示"),
                                    h("div",null,"闯关有奖励，就像玩游戏，来吧~")
                            ])
                        },
                        okText: '立即开启',
                        cancelText: '稍后开启',
                        onOk: function(){
                            var params={
                                id:id
                            };
                            $.req.get("call.json?module=productTask&customerId={$customerId}&method=checkpointBegin",{
                                params:params
                            },function(data){
                                if(data.code) {
                                    self.$Modal.error({
                                        content: data.msg
                                    });
                                }else{
                                    self.taskInfo.status = data.status;
                                    self.taskInfo.startTime = data.startTime;
                                    var endTime = moment(data.startTime).add(self.taskInfo.taskTime,'hours');
                                    self.time = self.calDiffMonths(endTime);
                                }
                            })
                        },
                        onCancel:function(){
                            location.href='{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=productTask&method=index&params=%7B"h":"index"%7D';
                        }
                    });
                }
            },
            calDiffMonths:function(EndDate) {
                var StartDate = moment();
                var time = EndDate.diff(StartDate);
                var duration= moment.duration(time);
                if(duration.years() > 0 || duration.months() > 0 || duration.days() > 0){
                    return duration.years() * 365 + duration.months() * 31 + duration.days()+"天"+duration.hours()+"小时"+duration.minutes()+"分钟";
                }else if(duration.hours() > 0){
                    return duration.hours()+"小时"+duration.minutes()+"分钟";
                }else{
                    return duration.minutes()+"分钟";
                }
            },
            updateTime:function(){
                var endTime = moment(this.taskInfo.startTime).add(this.taskInfo.taskTime,'hours');
                this.time = this.calDiffMonths(endTime);
                setTimeout(this.updateTime,60000);
            },
            goto:function(taskId,progressId){
                if (this.taskInfo.progress < progressId) return;
                progressId = progressId + 1;
                location.href='{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=productTask&method=index&params=%7B%22taskId%22:'+taskId+',"progressId":'+progressId+',"h":"messageInfo"%7D';
            },
            showImg:function(){
                wx_share.showImg([this.taskInfo.communityImg],this.taskInfo.communityImg)
            }
        }
    })
</script>
<script>
    wx_share.init({
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        "hideAllnone":true
    });
</script>
</html>
